<script setup>
import { ref, toRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Type from '@components/search/type'
import Search from '@components/search/index'
import PageWrapper from '@components/PageWrapper.vue'
import { common, service } from '@utils'
import { Plus, Edit, Delete, View, Lock } from '@element-plus/icons-vue'
import { usePremission } from '@hooks'
import EditCom from './Edit'
import Detail from './Detail'

const premission = usePremission({
    resetPwd: 'manager:sysUser:resetPwd',
    add: 'manager:sysUser:save',
    edit: 'manager:sysUser:updateByUserName',
    delete: 'manager:sysUser:del'
})

const searchs = ref([
    {
        type: Type.INPUT,
        key: 'username',
        width: 5,
        placeholder: '账号'
    },
    {
        type: Type.INPUT,
        key: 'nickName',
        width: 5,
        placeholder: '昵称'
    },
    {
        width: 6,
        type: Type.SEARCH_BUTTON
    }
])

const pageRef = ref()
const tableRef = ref()
const editRef = ref()
const detailRef = ref()

const companys = ref()
const statuss = ref()
const companyss = ref([])
let queryForm = {}

const onSearch = (param) => {
    queryForm = param
    pageRef.value.refresh()
}

const getData = async ({ pageNum, pageSize }, cb) => {
    const res = await service.auth.users(pageNum, pageSize, queryForm)
    cb(res)
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0)
    }, 0)
}

const getCompanys = async () => {
    const res = await service.auth.osysorgTree({includePlatform: true})
    const company = await service.auth.companyAll({excludePlatforms:false});
    companys.value = res.data
    if(company){
        companyss.value = company
    }
}

const getStatuss = async () => {
    const res = await service.sys.dictionaryAll('SysState')
    // res.forEach((item) => {
    //     item.value = Boolean(item.value - 0)
    // })
    statuss.value = res
}

const resetRow = async (row) => {
    ElMessageBox.confirm('是否重置此用户密码', '提示', {
        type: 'warning'
    }).then(async () => {
        const res = await service.auth.userResetPwd(row.id)
        if (res) {
            ElMessage.success('重置成功')
        }
    })
}

const deleteRow = async (row) => {
    ElMessageBox.confirm('是否删除此记录', '提示', {
        type: 'warning'
    }).then(async () => {
        const res = await service.auth.userDelete(row.id)
        if (res) {
            ElMessage.success('删除成功')
            pageRef.value.refresh(true)
        }
    })
}

getStatuss()
getCompanys()

// 授权角色
const setRole = async row => {
    // const res = await service.auth.rolePage()
    // detailRef.value.open(res)
}

const width = (function (premission) {
    let width = 24
    premission.resetPwd && (width += 33)
    premission.edit && (width += 33)
    premission.delete && (width += 33)
    return Math.max(width, 60)
})(premission)
</script>
    <template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" />
        <!-- v-if="premission.add" -->
        <div class="margin-bottom10" v-if="premission.add">
            <el-button type="primary" :icon="Plus" @click="editRef.open()">添加</el-button>
        </div>
        <page-wrapper @get-data="getData" ref="pageRef">
            <template v-slot:default="props">
                <vxe-table ref="tableRef" :loading="props.loading" :data="props.tableData.records"
                    :max-height="common.tableHeight(true, premission.add ? 2 : 2)" highlight-hover-row round stripe border>
                    <vxe-column type="seq" width="60"></vxe-column>
                    <vxe-column field="userName" title="账号" />
                    <vxe-column field="nickName" title="昵称" />
                    <vxe-column field="phone" title="手机号" />
                    <vxe-column field="email" title="邮箱" width="180" />
                    <vxe-column title="状态">
                        <template #default="{ row }">
                            <el-tag>{{common.getValueByKey('value', row.status, statuss, 'label')}}</el-tag> 
                        </template>
                    </vxe-column>
                    <vxe-column title="所属机构">
                        <template #default="{ row }">
                            <el-tag v-if="row.orgId">{{common.getValueByKey('id', row.orgId, companys, 'name')}}</el-tag> 
                        </template>
                    </vxe-column>
                    <vxe-column title="操作" :min-width="width" fixed="right">
                        <template #default="{ row }">
                            <section class="flex-align flex-wrap">
                                <!-- v-if="premission.view"
                                v-if="premission.edit"
                                v-if="premission.edit"
                                v-if="premission.delete" -->
                                <!-- <el-tooltip effect="dark" content="授权角色" placement="top" :enterable="false">
                                    <el-button type="primary" plain :icon="View" size="small" circle @click="setRole(row)">
                                    </el-button>
                                </el-tooltip> -->
                                <el-tooltip v-if="premission.edit" effect="dark" content="修改" placement="top" :enterable="false">
                                    <el-button type="primary" :icon="Edit" size="small" circle @click="editRef.open(row)">
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.resetPwd" effect="dark" content="重置密码" placement="top" :enterable="false">
                                    <el-button type="danger" plain :icon="Lock" size="small" circle @click="resetRow(row)">
                                    </el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.delete" effect="dark" content="删除" placement="top" :enterable="false">
                                    <el-button type="danger" :icon="Delete" size="small" circle @click="deleteRow(row)"></el-button>
                                </el-tooltip>
                            </section>
                        </template>
                    </vxe-column>
                </vxe-table>
            </template>
        </page-wrapper>
        <edit-com ref="editRef" @refresh="flag => pageRef.refresh(flag)" :companys="companys" :companyss="companyss" :statuss="statuss" />
        <detail ref="detailRef" :statuss="statuss"/>
    </section>
</template>